<!-- 银行卡修改 -->
<template>
	<view class="container">
		<view v-if="type==1">
			<view class="personal">
				<view class="section">
					<view class="section__title">持卡人姓名</view>
					<input disabled v-model="data.real_name" placeholder="请输入姓名" />
				</view>
				<view class="section">
					<view class="section__title">原开户银行名称</view>
					<input disabled v-model="lastData.bank_name" placeholder="请输入原开户银行名称" />
				</view>
				<view class="section">
					<view class="section__title">原银行卡号</view>
					<input disabled type="number" v-model="lastData.bank_card_number" placeholder="请输入原银行卡号"/>
				</view>
				<view class="section">
					<view class="section__title">新开户银行名称</view>
					<input disabled="true" v-model="data.bank_name" placeholder="请选择新开户银行名称" @tap="selectBank"/>
				</view>
				<view class="section">
					<view class="section__title">新银行卡号</view>
					<input type="number" v-model="data.bank_card_number" placeholder="请输入新的银行卡号" />
				</view>
			</view>
			<view class="btn-area">
				<button @tap="submit">修改</button>
			</view>
		</view>
		<view v-if="type==2">
			<view class="old-comp">
				<view class="section">
					<view class="section__title">原单位名称</view>
					<input disabled v-model="lastData.cardholder_name" placeholder="请输入原单位名称" />
				</view>
				<view class="section">
					<view class="section__title">原开户银行名称</view>
					<input disabled v-model="lastData.bank_name" placeholder="请输入原开户银行名称" />
				</view>
				<view class="section">
					<view class="section__title">原账号</view>
					<input disabled type="number" v-model="lastData.bank_card_number" placeholder="请输入原账号" />
				</view>
			</view> 
			<view class="new-comp">
				<view class="section">
					<view class="section__title">新单位名称</view>
					<input name="cardholder_name" v-model="data.cardholder_name" placeholder="请输入新单位名称" />
				</view>
				<view class="section">
					<view class="section__title">新开户银行名称</view>
					<input disabled="true" v-model="data.bank_name" placeholder="请选择新开户银行名称"  @tap="selectBank"/>
				</view>
				<view class="section">
					<view class="section__title">新账号</view> 
					<input type="number" v-model="data.bank_card_number" placeholder="请输入新账号" />
				</view>
			</view>
			
			
			<view class="btn-area">
				<button @tap="submit">修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { sellerIndex, changeBank } from "@/api/merchant.js"
	export default {
		data(){
			return {
				type: null,
				lastData: {},
				data: {
					real_name: '',
					cardholder_name: '',
					bank_name: '',
					bank_card_number: '',
				},
			}
		},
		onLoad(option) {
			sellerIndex().then(res => {
				this.type = res.data.seller_info.bank_type
				this.lastData = res.data.seller_info;
				this.data.real_name = uni.getStorageSync('userInfo').real_name
			})
			
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.selectBank) { //选择银行
				this.data.bank_name = currPage.bank_name;
			}
		},
		methods: {
			//选择银行名称
			selectBank() {
				uni.navigateTo({
					url:"/pages/center/accountSet/bank/selectBank"
				})
			},
			submit(){
				uni.showLoading({
					mask:true
				})
				this.data.bank_card_number = this.data.bank_card_number.replace(/\s/g, "")
				let data = {}
				if (this.type == 1) {
					data = {
						bank_type: this.type,
						real_name: this.data.real_name,
						bank_name: this.data.bank_name,
						bank_real_name: this.data.bank_name,
						bank_card_number: this.data.bank_card_number,
					}
				} else if (this.type == 2){
					data = {
						bank_type: this.type,
						cardholder_name: this.data.cardholder_name,
						bank_name: this.data.bank_name,
						bank_real_name: this.data.bank_name,
						bank_card_number: this.data.bank_card_number,
					}
				}
				changeBank(data).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: "none"
					})
					setTimeout(function() {
						uni.navigateBack({
							
						})
					}, 1000)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		border-top: 20rpx solid #EEEEEE;
// 		width: 80%;
// 		margin: 40rpx auto;
		.personal,.old-comp,.new-comp{
			width: 90%;
			margin: 40rpx auto;
		}
		.new-comp{
			margin: 90rpx auto 0;
		}
		.section{
			margin: 45rpx 0 20rpx;
			.section__title{
				font-size: 28rpx;
				color: #333333;
			}
			input{
				font-size: 24rpx;
				color: #999999;
				padding: 10rpx 0 2rpx 0rpx;
				border-bottom: 1px solid #EEEEEE;
			}
		}
		.btn-area{
			font-size:32rpx;
			width: 80%;
			background: white;
			border-radius: 12rpx;
			margin: 100rpx auto 0;
			
			button{
				color: #FFFFFF;
				background:rgba(87,190,106,1);
				border-radius:40rpx;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style>
